<template>
  <video width="100%" preload="auto" :poster="sources.poster" controls="controls" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" ref="videoRef">
    <source :src="sources.src" />
  </video>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import videojs from "video.js";
import "video.js/dist/video-js.min.css";

const props = defineProps({
  sources: { type: Object, required: true },
});
const videoRef = ref(null);
const player = ref(null);

const videoInit = () => {
  player.value = videojs(
    videoRef.value,
    {
      // 视频源
      sources: [{ src: props.sources.src, type: "video/mp4" }],
      //是否显示播放按钮
      bigPlayButton: true,
      playbackRates: [0.5, 1, 1.5, 2],
      controls: true,
      //设置小喇叭音量键
      controlBar: {
        fullscreenToggle: true,
        // 音量条的横向还是纵向显示
        volumePanel: {
          inline: false,
        },
      },
    },
    () => {
      player.value.on("play", () => {});
    }
  );
};
onMounted(() => {
  videoInit();
});
onBeforeUnmount(() => {
  if (player.value) {
    player.value.dispose();
  }
});
</script>
<style lang="less" scoped>
</style>
